:host {
  flex : 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 0;

  .query-section {
    flex: 0 0 auto;
    padding: 16px;
    background: #fff;
    border-radius: 4px;

    .query-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .query-item {
        display: flex;
        align-items: center;
        gap: 8px;

        .query-label {
          font-weight: 500;
          white-space: nowrap;
        }
      }

      .query-buttons {
        display: flex;
        gap: 8px;
      }
    }  
  }

  .main-card {
    flex: 1 1 auto;
    display: flex;
    height: 0;
    flex-direction: column;
    margin: 12px 0;

    ::ng-deep {
      .ant-card-body {
        flex: 1 1 auto;
        display: flex;
        min-height: 0;
        padding: 0px;
        background: #fff;

        nz-table {
          flex: 1 1 auto;
          overflow: hidden;
          table-layout: fixed;
          width: 100%;

          nz-spin {
            height: 100%;

            .ant-spin-container {
              height: 100%;
              display: flex;
              flex-direction: column;

              .ant-table-header {
                flex: 0 0 auto;
                padding: 0;
                
                table {
                  margin: 0;
                }
              }

              .ant-table {
                min-height: 0;
                flex: 1;
                overflow: hidden;

                nz-table-inner-scroll {
                  height: 100%;
                  display: flex;
                  flex-direction: column;

                  .ant-table-header {
                    flex: 0 0 auto;
                    padding: 0;
                    
                    table {
                      margin: 0;
                    }
                  }
                  
                  .ant-table-body {
                    max-height: 100%;
                    overflow-y: auto;
                    tr{
                      td{
                        padding: 6px 8px;
                      }
                    }
                  }
                }
              }

              nz-pagination {
                min-height: 0;
                margin: 16px 16px 16px 0;
                background: #fff;
                .ant-pagination-total-text {
                  flex: 1;
                  display: flex;
                  margin-left: 16px;
                }
              }
            }
          }

          // 日期表头样式
          .date-header {
            font-weight: 600;
            text-align: center;
            padding: 4px 0;
            font-size: 14px;
          }
          
          // 子表头样式
          .sub-headers {
            display: flex;
            justify-content: space-around;
            border-top: 1px solid #f0f0f0;
            padding-top: 4px;
            margin-top: 4px;

            .sub-header {
              flex: 1;
              text-align: center;
              font-size: 12px;
              font-weight: 500;
              color: #666;
            }
          }

          // 期内/期外表头样式
          .period-header {
            font-weight: 600;
            text-align: center;
            padding: 4px 0;
            font-size: 14px;

            &.within-period {
              color: #1890ff;
            }

            &.out-of-period {
              color: #52c41a;
            }
          }

          // 每日数据单元格样式
          .daily-data {
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 4px;

            .daily-cell {
              flex: 1;
              text-align: center;
              padding: 4px 2px;
              font-size: 13px;

              &.shortage {
                color: #ff4d4f;
                font-weight: 600;
              }
            }

            &.within-period-data {
              background-color: #e6f7ff;
            }

            &.out-of-period-data {
              background-color: #f6ffed;
            }
          }

          // 选中行样式
          .ant-table-tbody > tr.selected-row {
            background-color: #e6f7ff !important;

            &:hover > td {
              background-color: #bae7ff !important;
            }
          }
        }
      }
    }
  }
  
  .detail-section {    
    flex: 1 1 auto;
    display: flex;
    height: 0;
    flex-direction: column;

    .detail-header {
      flex: 0 0 auto;
      padding: 16px;
      background: #fff;
      border-radius: 4px 4px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }

      .detail-stats {
        display: flex;
        gap: 24px;
        align-items: center;

        .stat-item {
          display: flex;
          align-items: center;
          gap: 8px;
          white-space: nowrap;

          .stat-label {
            color: #666;
            font-size: 13px;
          }

          .stat-value {
            font-weight: 600;
            font-size: 14px;
            color: #262626;

            &.shortage {
              color: #ff4d4f;
            }
          }
        }
      }
    }
    
    .detail-card {
      flex: 1 1 auto;
      display: flex;
      height: 0;
      flex-direction: column;
      margin: 12px 0;

      ::ng-deep {
        .ant-card-body {
          flex: 1 1 auto;
          display: flex;
          min-height: 0;
          padding: 0px;
          background: #fff;

          nz-table {
            flex: 1 1 auto;
            overflow: hidden;
            table-layout: fixed;
            width: 100%;

            nz-spin {
              height: 100%;

              .ant-spin-container {
                height: 100%;
                display: flex;
                flex-direction: column;

                .ant-table {
                  min-height: 0;
                  flex: 1;
                  overflow: hidden;

                  nz-table-inner-scroll {
                    height: 100%;
                    display: flex;
                    flex-direction: column;

                    .ant-table-header {
                      min-height: 48px;
                    }
                    
                    .ant-table-body {
                      max-height: 100%;
                      overflow-y: auto;
                      tr{
                        td{
                          padding: 6px 8px;
                        }
                      }
                    }
                  }
                }

                nz-pagination {
                  min-height: 0;
                  margin: 16px 16px 16px 0;
                  background: #fff;
                  .ant-pagination-total-text {
                    flex: 1;
                    display: flex;
                    margin-left: 16px;
                  }
                }
              }
            }
          }
        }
      }
      
      // 详情表格行样式
      .demand-row {
        background-color: #fff7e6;
        
        &:hover > td {
          background-color: #ffe7ba !important;
        }
      }

      .supply-row {
        background-color: #f6ffed;
        
        &:hover > td {
          background-color: #d9f7be !important;
        }
      }
    }
  }
}